<template>
  <q-page class="flex flex-center">
    <div class="q-pa-md">
      <div class="q-gutter-x-xs q-gutter-y-lg">
        <q-btn class="color-btn" @click="openInNew('')">打开新页面</q-btn>
        <q-btn class="color-btn" @click="openInNew('https://fancyqube-download.oss-cn-shanghai.aliyuncs.com/tmp/json-1/index.html')">Json格式化</q-btn>
        <!-- <q-btn class="color-btn" @click="openInNew('https://fancyqube-download.oss-cn-shanghai.aliyuncs.com/tmp/Tools.7z')">系统清理工具合集</q-btn> -->
        <q-btn class="color-btn" id="test_id" @click="myButtonClickHandler">功能开发中</q-btn>
        <!-- <q-img style="width: 150;height: 150px;" src="icons/video.svg">
          <div class="absolute-bottom-right text-subtitle2 cursor-pointer" @click="openInNew('https://www.baidu.com')">
            演示视频
          </div>
        </q-img> -->
      </div>
    </div>

  </q-page>

</template>

<script setup>
import { useQuasar } from 'quasar'
import { onBeforeUnmount } from 'vue'
const $q = useQuasar()
function doOnTabOpened(url) {
  console.log('New Browser Tab Openend: ', url)
}

// Add our listener
$q.bex.on('bex.tab.opened', doOnTabOpened)

// Don't forget to clean it up
onBeforeUnmount(() => {
  $q.bex.off('bex.tab.opened', doOnTabOpened)
})

const myButtonClickHandler = () => {
  $q.bex.send('page_add_btn')
  $q.notify('Text has been highlighted')
}

const openInNew = (url)=>{
  url ? $q.bex.send('open_in_new', {url: url}):  $q.bex.send('open_in_new')
}

// const openvideo = ()=>{
//   $q.bex.send('open_in_new', {url: 'https://www.baidu.com'})
// }

</script>
